<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>收银系统</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>

    <style>
        .my-box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 30%;
            transition: all 0.3s;
            border-radius: 12px;
            box-shadow: 0 8px 16px -4px grey;
            height: 150px;
            overflow: hidden;
            /*padding: 15px;*/
            cursor: pointer;
            margin: 10px;
            font-size: 34px;
        }

        .my-box:active {
            transform: scale(0.95);
        }

    </style>
</head>

<body class="gray-bg">
<div class="row border-bottom white-bg dashboard-header">
    <div class="col-sm-12" style="display: flex;justify-content: space-around">
        <div  class="my-box" style="background-color: springgreen"  >
            <div  onclick="addBill()">
                新增消费
            </div>
        </div>
        <div class="my-box" style="background-color: springgreen" >
            <div onclick="addMember()">
                新增会员
            </div>
        </div>
        <div class="my-box" style="background-color: springgreen"  >
            <div onclick="addRechargeRecord()">
                会员充值
            </div>
        </div>
    </div>
    <div class="col-sm-12" style="display: flex;justify-content: space-around">
        <div class="my-box" style="background-color: paleturquoise"  >
            <div onclick="toBill()">
                账单管理
            </div>
        </div>
        <div class="my-box" style="background-color: paleturquoise"  >
            <div onclick="toMember()">
                会员管理
            </div>
        </div>
    </div>

<!--    <div class="col-sm-8">-->
<!--        收益折表图-->
<!--    </div>-->

<!--    <div class="col-sm-3">-->
<!--        昨日账单-->
<!--    </div>-->

</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<th:block th:include="include :: footer" />
<script  th:inline="javascript">
<!--账单路径前缀-->
    var prefixBill = ctx + "custom/bill";
    var prefixMember = ctx + "custom/member";
    var prefixRecord = ctx + "custom/record";

    function addBill(){
        $.modal.openTab("新增消费", prefixBill+"/add");
    }
    function addMember(){
        $.modal.openTab("新增会员", prefixMember+"/add");
    }
    function addRechargeRecord(){
        $.modal.openTab("充值中心", prefixRecord+"/add");
    }

    function toBill(){
        $.modal.openTab("账单管理", prefixBill);
    }

    function toMember(){
        $.modal.openTab("会员管理", prefixMember);
    }

</script>
</body>
</html>
